<template>
  <div class="charts">
    <div class="riskNum">
        <div class="box-card">
            <img src="../../../../../assets/staticPicture/monitorCom.png" alt="">
            <div class="text">
                <span>监控企业</span>
                <div><span class="num">{{monitorComNum}}</span>家</div>
            </div>
        </div>
        <div class="box-card">
            <router-link to="/risk_warning/businessRisk" style="position:absolute;top:10px;right:10px;color:#68b1fc;font-size:12px">查看>></router-link>
            <img src="../../../../../assets/staticPicture/comRisk.png" alt="">
            <div class="text">
                <span>企业风险</span>
                <div><span class="num">{{riskComNum}}</span>条</div>
            </div>
        </div>
    </div>
    <div class="riskType">
        <div class="title">
            <svg t="1691397832081" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2038" width="16" height="16"><path d="M844.8 0H198.4c-70.4 0-128 57.6-128 128v896H128l121.6-89.6c6.4-6.4 19.2-6.4 25.6 0L384 1011.2c6.4 6.4 19.2 6.4 25.6 0l108.8-76.8c6.4-6.4 19.2-6.4 25.6 0l108.8 76.8c6.4 6.4 19.2 6.4 25.6 0l108.8-76.8c6.4-6.4 19.2-6.4 25.6 0l121.6 89.6h57.6V128c-19.2-70.4-76.8-128-147.2-128z m-192 499.2l25.6 140.8c0 19.2-12.8 32-25.6 19.2l-121.6-64H512l-121.6 64c-12.8 6.4-32-6.4-25.6-19.2l25.6-128c0-6.4 0-12.8-6.4-19.2L281.6 396.8c-12.8-12.8-6.4-32 12.8-32l134.4-19.2c6.4 0 12.8-6.4 12.8-12.8l57.6-121.6c6.4-12.8 25.6-12.8 38.4 0l57.6 121.6c0 6.4 6.4 12.8 12.8 12.8l134.4 19.2c19.2 0 25.6 25.6 12.8 32l-102.4 102.4z" fill="#1f8bfa" p-id="2039"></path></svg>
            <span>风险类型分析</span>
        </div>
        <div id="riskType"></div>
    </div>
    <div class="riskLevel">
        <div class="title">
            <svg t="1691397957431" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="849" width="16" height="16"><path d="M819.2 921.6H204.8a51.2 51.2 0 0 0 0 102.4h614.4a51.2 51.2 0 0 0 0-102.4zM256 870.4h512v-358.4a256 256 0 0 0-512 0zM512 204.8a51.2 51.2 0 0 0 51.2-51.2V51.2a51.2 51.2 0 0 0-102.4 0v102.4a51.2 51.2 0 0 0 51.2 51.2zM222.208 294.912a51.2 51.2 0 0 0 72.704-72.704L222.208 150.016a51.2 51.2 0 0 0-72.192 72.192zM204.8 512a51.2 51.2 0 0 0-51.2-51.2H51.2a51.2 51.2 0 0 0 0 102.4h102.4a51.2 51.2 0 0 0 51.2-51.2zM972.8 460.8h-102.4a51.2 51.2 0 0 0 0 102.4h102.4a51.2 51.2 0 0 0 0-102.4zM801.792 294.912l72.192-72.192a51.2 51.2 0 0 0-72.192-72.192l-72.704 71.68a51.2 51.2 0 0 0 72.192 72.192z" fill="#1f8bfa" p-id="850"></path></svg>
            <span>风险等级分析</span>
        </div>
        <div id="riskLevel"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {getLevelChart,getTypeChart,} from '@/api/manager.js'
import {getCompanyCount,getCompanyFxCount} from '@/api/riskWarning.js'
export default {
    props:['loading'],
    data(){
        return {
            monitorComNum:0,
            riskComNum:0
        }
    },
    watch:{
        'loading':{
            handler(newVal, oldVal) {
                if (newVal) {
                    this.$nextTick(()=>{
                        this.getComCount();
                        this.getComRiskCount();
                        this.getRiskType();
                        this.getRiskLevel();
                    })
                }
            },
            deep: true,
            immediate: true,
        }
    },
    created(){
        /* this.$nextTick(()=>{
            this.getComCount();
            this.getComRiskCount();
            this.getRiskType();
            this.getRiskLevel();
        }) */
    },
    methods:{
        getComCount(){
            getCompanyCount().then(res=>{
                this.monitorComNum = res.data ? res.data : 0
            })
        },
        getComRiskCount(){
            getCompanyFxCount().then(res=>{
                this.riskComNum = res.data ? res.data : 0
            })
        },
        /* 风险类型分析 */
        getRiskType(){
            getTypeChart().then((res) => {
                if (res.status) {
                    let data = []
                    let cLabel = []
                    res.data.map((item) => {
                        data.push({ value: item.num, name: item.fieldName })
                        cLabel.push(item.fieldName)
                    })
                    //fxdjChart
                    this.jrjgTrend(data, cLabel)
                }
            })
        },
        /* 风险类型分析渲染 */
        jrjgTrend(data, cLabel) {
            if (data.length !== 0) {
                let chartDom = document.getElementById('riskType')
                let jrjgChart = echarts.init(chartDom)
                let option

                option = {
                    color:['#6d93ff','#8b78ff','#ff79bf','#ffa749','#00d3c7','#00d381'],
                    title: {
                        text: '',
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} :{c}条<br/>占比:{d}%',
                    },
                    legend: {
                        right: '20',
                        orient: 'vertical',
                        data: cLabel,
                    },
                    series: [
                        {
                        type: 'pie',
                        radius: ['40%', '70%'],
                        data: data,
                        itemStyle: {
                            emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                            normal: {
                            label: {
                                show: true,
                                formatter: '{b} : {c}条\n占比{d}%', //带当前图例名 + 百分比
                                //formatter: '{d}%' //只要百分比
                            },
                            labelLine: { show: true },
                            },
                        },
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)',
                            },
                        },
                        },
                    ],
                }

                option && jrjgChart.setOption(option)
                window.addEventListener('resize', () => {
                jrjgChart.resize()
                })
            } else {
                var html = `<div style="position: relative;"><sapn style="position: absolute;top: 4px;font-size: 18px;font-weight: bold;"></sapn><span  style="position: absolute;top: 10vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无数据</span></div>`
                document.getElementById('riskType').innerHTML = html
                document
                .getElementById('riskType')
                .removeAttribute('_echarts_instance_')
            }
        },
        /* 风险等级分析 */
        getRiskLevel(){
            getLevelChart().then((res) => {
                if (res.status) {
                let cData = []
                res.data.map((item) => {
                    cData.push({ value: item.num, name: item.fieldName })
                })

                this.$nextTick(() => {
                    if (cData.length !== 0) {
                        var chartDom = document.getElementById('riskLevel')
                        var fxdlChart = echarts.init(chartDom)
                        var option

                        option = {
                            color:['#705af4','#3d6bed','#00d3c7'],
                            title: {
                                top: 20,
                                text: '',
                                fontSize: '18',
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: '{b} :{c}条<br/>占比:{d}%',
                            },
                            legend: {
                                right: '20',
                                orient: 'vertical',
                            },
                            series: [
                            {
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center',
                                },
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                                    },
                                },
                                labelLine: {
                                    show: false,
                                },
                                data: cData,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                                    },
                                    normal: {
                                        label: {
                                        show: true,
                                            formatter: '{b} :{c}条\n占比:{d}%',
                                        },
                                        labelLine: { show: true },
                                    },
                                },
                            },
                            ],
                        }
                        option && fxdlChart.setOption(option)
                        window.addEventListener('resize', () => {
                            fxdlChart.resize()
                        })
                        } else {
                        // 以下是暂无数据显示样式(样式根据本身需求进行调整)
                        var html = `<div style="position: relative;"><sapn style="position: absolute;top: 20px;font-size: 18px;font-weight: bold;"></sapn><span  style="position: absolute;top: 10vh;margin-left: 40%;color:#868686; font-size: 20px;">暂无数据</span></div>`
                        document.getElementById('riskLevel').innerHTML = html
                        document
                            .getElementById('riskLevel')
                            .removeAttribute('_echarts_instance_')
                        }
                    })
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.charts{
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    height: 300px;
    margin-bottom: 20px;
    font-size: 14px;
    .riskType,.riskLevel{
        width:39%;
        height: 300px;
        border-radius: 10px;
        background: #fff;
        /* box-shadow:  7px 7px 10px #c7c7c7,
             -7px -7px 10px #f9f9f9; */
        .title{
            display: flex;
            align-items: center;
            padding: 10px 0 0 10px;
            font-weight: 900;
        }
    }
}
.riskNum{
    width:20%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.box-card {
    position:relative;
    width: 100%;
    height: 140px;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding:0 30px;
    background: #fff;
    /* box-shadow:  7px 7px 10px #c7c7c7,
             -7px -7px 10px #f9f9f9; */
    img{
        width:80px;
        height: 90px;
    }
    .text {
        height: 110px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align:center;
        .num{
            color: #557ef2;
            font-size: 30px;
            font-weight: 900;
        }
    }
}

#riskType,#riskLevel{
    width:100%;
    height: 270px;
}
</style>